<template>
  <div
    :class="[
      'filter-wrap',
      isPreview ? 'filter-wrap-shadow' : 'filter-wrap-canDel',
    ]"
    :style="{ marginBottom: `${space}px` }"
    :data-id="config.id"
    ref="board-filter-wrap"
  >
    <div class="board-filter-wrap-title" v-if="!isPreview">
      <span class="filter-title">全局配置</span>
      <div class="tabs-tools">
        <i class="el-icon-delete" @click="del"></i>
      </div>
    </div>
    <common-search @search="handleSearch" @reset="handleReset">
      <div
        :class="[
          'filter-list-wrap',
          isPreview ? 'report-filter-list-wrap' : '',
        ]"
      >
        <div class="filter-list" ref="headerDom">
          <div
            class="f-l-item"
            :class="['f-l-item', isPreview ? 'f-l-isPreview-item' : '']"
            v-for="item in config.children"
          >
            <div class="f-l-i-label">
              <common-carousel-text :content="item.name" :font-size="14" />
            </div>
            <div class="f-l-i-content">
              <el-date-picker
                v-if="
                  item.timeConfig === 'datetime' &&
                  item.filterType === 'dateFilter'
                "
                v-model="item.content"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>

              <el-date-picker
                v-if="
                  item.timeConfig === 'datetimeRange' &&
                  item.filterType === 'dateFilter'
                "
                v-model="item.content"
                type="datetimerange"
                range-separator="至"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              >
              </el-date-picker>

              <common-input
                v-model="item.content"
                v-if="item.filterType === 'inputFilter'"
                @enter="handleSearch"
              ></common-input>
            </div>
          </div>
        </div>
      </div>
    </common-search>
    <!-- <div class="filter-list"
           :style="{width: 'calc(100% - 122px)'}"
           ref="headerDom">
        <div :class="['f-l-item',isPreview ? 'f-l-isPreview-item' : '']"
             :style="{width: isPreview ? 'calc(50% - 12px)' : '50%'}"
             v-for="item in config.children">
          <div class="f-l-i-label">
            <common-carousel-text :content="item.name" :font-size="14" />
          </div>
          <div class="f-l-i-content">

            <el-date-picker
                v-if="item.timeConfig === 'datetime' && item.filterType === 'dateFilter'"
                v-model="item.content"
                type="datetime"
                placeholder="选择日期时间"
            >
            </el-date-picker>

            <el-date-picker
                v-if="item.timeConfig === 'datetimeRange' && item.filterType === 'dateFilter'"
                v-model="item.content"
                type="datetimerange"
                range-separator="至"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
            >
            </el-date-picker>

            <common-input
                v-model="item.content"
                v-if="item.filterType === 'inputFilter'"
                @enter="handleSearch"
            ></common-input>
          </div>
        </div>
      </div>
      <div :class="['filter-header-button-box',isPreview ? 'f-h-isPreview' : '']">
        <div class="filter-header-button">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button> -->

    <!--          <span @click="handleMoreClick" v-if="moreShow">{{isHidden ? '展开' : '收起'}}-->
    <!--                            <i :class="isHidden ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>-->
    <!--                        </span>-->
    <!-- </div>
      </div> -->
  </div>
</template>

<script>
import { spaceWH } from "../dataStructure";

export default {
  name: "filterWrap",
  props: {
    isPreview: {
      type: Boolean,
      default: false,
    },
    config: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      isHidden: false,
      space: spaceWH,
    };
  },
  methods: {
    /**
     * 删除全局配置
     */
    del() {
      this.$emit("deleteComponents", this.config);
    },
    /**
     * 查询
     */
    handleSearch() {
      this.$emit("handleSearch", false);
    },
    /**
     * 重置
     */
    handleReset() {
      this.$emit("handleReset");
    },
  },
};
</script>

<style scoped lang="scss">
.filter-wrap {
  width: 100%;
  position: relative;
  border: 1px solid #eee;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 4px;
  padding: 12px;

  .board-filter-wrap-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;

    .filter-title {
      font-weight: bold;
    }

    .tabs-tools {
      opacity: 0;
      transition: all 0.3s;

      .el-icon-delete {
        font-weight: bold;
        cursor: pointer;

        &:hover {
          color: #f56c6c;
        }
      }
    }
  }
}

.filter-wrap-canDel {
  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .tabs-tools {
      opacity: 1;
    }
  }
}

.filter-list-wrap {
  display: flex;
  align-items: flex-start;
  width: 100%;
  transition: all 0.3s;
  background-color: #fff;

  .filter-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;

    .f-l-item {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      margin-bottom: 19px;
      margin-right: 10px;

      .f-l-i-label {
        width: 80px;
        padding-right: 5px;
        box-sizing: border-box;
        font-size: 14px;
        text-align: right;
        overflow: hidden;
        white-space: nowrap;
        word-break: break-all;
        text-overflow: ellipsis;
        color: #606266;
      }

      .f-l-i-content {
        width: calc(100% - 96px);

        .el-date-editor {
          width: 100%;
        }
      }
    }
  }

  .filter-header-button-box {
    height: 100%;
    position: relative;

    .filter-header-button {
      display: flex;
    }
  }

  .f-h-isPreview {
    margin-top: 12px;
  }
}

.filter-wrap-shadow {
  padding: 18px 12px 0 12px;
}
</style>
